<template>
	
	<view class="comment-list">
		<view class="comment-face"><image :src="item.user_images" mode="widthFix"></image></view>
		<view class="comment-body">
			<view class="comment-top">
				<text>{{item.user_name}}</text>
			</view>
			<view class="comment-date">
				<text>{{item.comment_time}}</text>
			</view>
			<view class="star_box"><text>评分：</text><uni-rate disabled="true" size="18" :value="item.star"></uni-rate></view>
			<view class="comment-content">{{item.comment_content}}</view>
			<view class="comment-replys" v-if="item.comment_reply">{{item.comment_reply}}</view>
		</view>
	</view>
	
</template>

<script>
import uniRate from '@/components/uni-rate/uni-rate.vue'
export default {
	components:{
		uniRate
	},
	data() {
		return {

		}
	},
	props:{
		item:{
			type: Object
		}
	},
	methods: {

	}
}
</script>

<style lang="scss">
.comment-list{ flex-wrap:nowrap; padding:18upx 26upx; margin:10rpx 0; width:100%; display: flex; border-bottom:1px solid #eeeeee; }
.comment-face{width:70upx; height:70upx; border-radius:100%; margin-right:20upx; flex-shrink:0; overflow:hidden; }
.comment-face image{width:100%; border-radius:100%; }
.comment-body{ width:100%; position:relative; }
.comment-body .star_box { position:absolute; right:0px; top:3px; }
.comment-body .star_box text { height:18px; line-height:18px; color:$font-color-999; display:block; float:left; font-size:24upx; }
.comment-top{ line-height:1.5em; justify-content:space-between;}
.comment-top text{ color:$font-color-000; font-size:$font-base;}
.comment-date{ line-height:38upx; flex-direction:row; justify-content:space-between; display:flex!important; flex-grow:1; color:$font-color-ccc; }
.comment-date view{ color:$font-color-666; font-size:24upx; line-height:38upx;}
.comment-content{ line-height:34upx; font-size:24upx; padding:8rpx 0; color:$font-color-666; }
.comment-replys{ font-size:24upx; line-height:34upx; padding:5upx 0; color:#cd8c00; }
.comment-list:nth-last-child(1) { border-bottom:0px; }
</style>